<!-- 出品部门业绩 -->
<template>
  <div class="clas_All">
    <el-row>
      <el-col :span="24">
        <div>
          <el-form :model="queryParams" size="small" :inline="true">
            <el-form-item prop="">
              <el-date-picker
                v-model="queryParams.date"
                type="date"
                @change="createdTimeChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="">
              <el-select v-model="queryParams.deptId" placeholder="请选择部门">
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.relateId"
                  :label="dict.label"
                  :value="dict.relateId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getList"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!-- columns:表头。tableData：渲染数据 -->
      <eltab
        :columns="columns"
        :table-data="tableData"
        @row-click="handleRowClick"
      ></eltab>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>

<script>
import eltab from "@/components/ElTable/index";
import { getSaleData } from "@/api/system/calculate";
import { FindShopBom } from "@/api/system/stock";
export default {
  components: { eltab },
  data() {
    return {
      queryParams: {
        timer: null,
        deptld: "",
        paraMonth: "",
        paramrime: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      deptOptions: [],
      columns: [
        { label: "门店", prop: "deptName" },
        { label: "出品部门", prop: "" },
        { label: "菜品名称", prop: "foodName" },
        { label: "菜品编码", prop: "foodCode" },
        { label: "份数", prop: "foodCount" },
        { label: "菜品单价", prop: "price" },
        { label: "菜品金额", prop: "cost" },
      ],
      tableData: [],
      dataEnd: "",
      value: [],
    };
  },
  created() {
    // this.getList();
    this.FindShop();
  },
  methods: {
    handleQuery() {},
    handleRowClick(v) {
      console.log(1, v);
    },
    getList() {
      getSaleData(this.queryParams).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    FindShop() {
      FindShopBom().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          let ovj = res.data.filter((ite) => {
            if (ite.relateId !== null) {
              delete ite.children;
              return ite;
            }
          });
          if (ovj.length > 1) {
            this.mouday = true;
          }
          this.deptOptions = ovj;
        }
      });
    },
    createdTimeChange(v) {
      if (v) {
        const originalDate = new Date(v);
        const year = originalDate.getFullYear();
        const month = String(originalDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
        const day = String(originalDate.getDate()).padStart(2, "0");
        // 拼接成目标格式的日期字符串
        this.queryParams.date = `${year}-${month}-${day}`;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.clas_All {
  margin: 20px;
}
</style>
